<template>
    <view class="community-container" :style="{background:bgColor}" ref="boxH" id="boxH">
        <header-vue ref="headerH" id="headerH" :searchStatus="true" bgColor="transparent">
			<template v-slot:search>
                <view class="flex search-box margin32" :class="{disabled:navActive == 4}">
					<i class="iconfont icon-search font40" @click="onSearch"></i>
					<input class="flex start font28 input" v-model="searchKeyword" placeholder="搜索" confirm-type="search" @confirm="onSearch" />
				</view>
            </template>
        </header-vue>
        <view class="nav-con flex between" ref="navH" id="navH">
            <view class="nav-item font30" 
            v-for="item in navsList" :key="item.id" 
            :class="[item.id == navActive ? 'active': '']"
            @click="navClickEvent(item.id)">{{ item.name }}</view>
        </view>
        <view class="list-box" :style="{'height':sH + 'px'}" v-show="navActive == 0">
            <llq ref="llqRef"></llq>
        </view>
        <view class="list-box" :style="{'height':sH + 'px'}" v-show="navActive == 1">
            <llx ref="llxRef"></llx>
        </view>
        <view class="list-box" :style="{'height':sH + 'px'}" v-show="navActive == 2">
            <hdq ref="hdqRef"></hdq>
        </view>
        <view class="list-box" :style="{'height':sH + 'px'}" v-show="navActive == 3">
            <gxz ref="gxzRef"></gxz>
        </view>
        <view class="list-box" :style="{'height':sH + 'px'}" v-show="navActive == 4">
            <jxt ref="jxtRef"></jxt>
        </view>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue';
import llq from './llq/index.vue';
import llx from './llx/index.vue';
import hdq from './hdq/index.vue';
import gxz from './gxz/index.vue';
import jxt from './jxt/index.vue';
export default {
    name: 'CommunityPage',
    components: {
        headerVue,
        llq,
        llx,
        hdq,
        gxz,
        jxt
    },
    props: {
        activeId: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            sH: 0,
            navsList:[
                {
                    id:0,
                    name:'邻里圈'
                },
                {
                    id:1,
                    name:'邻里讯'
                },
                {
                    id:2,
                    name:'活动墙'
                },
                {
                    id:3,
                    name:'逛闲置'
                },
                {
                    id:4,
                    name:'匠学堂'
                }
            ],
            navActive: 0,
            bgColor:'',
            searchKeyword: ''
        }
    },
    mounted() {
        // 在节点渲染完成后再测量，兼容App端
        this.$nextTick(() => {
            const q = uni.createSelectorQuery().in(this)
            q.select('#headerH').boundingClientRect()
             .select('#boxH').boundingClientRect()
             .select('#navH').boundingClientRect()
             .exec(rects => {
                if (!rects || rects.length < 3) return
                const headerRect = rects[0]
                const boxRect = rects[1]
                const navRect = rects[2]
                const headerHeight = headerRect ? headerRect.height : 0
                const boxH = boxRect ? boxRect.height : 0
                const navH = navRect ? navRect.height : 0
                const calc = boxH - headerHeight - navH
                this.sH = calc > 0 ? calc : 0
             })
            // 初始化当前激活模块为传入的 activeId
            this.setActiveByProp()
        })
    },
    watch: {
        // 监听token变化，当登录成功后通知所有子组件刷新数据
        '$store.state.token': {
            handler(newToken, oldToken) {
                // 当token从空变为有值（登录成功）时，刷新当前活跃tab的数据
                if (!oldToken && newToken) {
                    this.refreshCurrentTabData()
                }
            },
            immediate: false
        },
        // 根据外部传入的 activeId 显示对应模块
        activeId(newVal) {
            const id = Number(newVal) || 0
            this.navClickEvent(id)
        }
    },
    methods: {
        // 根据 props.activeId 设置当前激活tab
        setActiveByProp() {
            const id = Number(this.activeId) || 0
            this.navActive = id
            this.bgColor = id === 1 ? 'linear-gradient( 180deg, #e6f0ff 0%, #feffff 100%)' : '#fff'
            this.$nextTick(() => {
                this.refreshCurrentTabData()
            })
        },
        navClickEvent(id) {
            this.navActive = id
            this.bgColor = '#fff'
            if (id == 1) {
                this.bgColor = 'linear-gradient( 180deg, #e6f0ff 0%, #feffff 100%)'
            }
            
            // 切换tab时也刷新数据，确保显示最新内容
            this.$nextTick(() => {
                this.refreshCurrentTabData()
            })
        },
        onSearch() {
            const keyword = (this.searchKeyword || '').trim()
            // 根据当前tab，以 emit 的形式分发到子组件
            if (this.navActive === 0 && this.$refs.llqRef) {
                this.$refs.llqRef.$emit('search', keyword)
            } else if (this.navActive === 1 && this.$refs.llxRef) {
                this.$refs.llxRef.$emit('search', keyword)
            } else if (this.navActive === 2 && this.$refs.hdqRef) {
                this.$refs.hdqRef.$emit('search', keyword)
            } else if (this.navActive === 3 && this.$refs.gxzRef) {
                this.$refs.gxzRef.$emit('search', keyword)
            }
        },
        
        // 刷新当前活跃tab的数据
        refreshCurrentTabData() {
            // 延迟执行，确保组件已经渲染
            this.$nextTick(() => {
                if (this.navActive === 0 && this.$refs.llqRef) {
                    // 邻里圈：调用刷新数据方法
                    if (typeof this.$refs.llqRef.refreshData === 'function') {
                        this.$refs.llqRef.refreshData()
                    }
                } else if (this.navActive === 1 && this.$refs.llxRef) {
                    // 邻里讯：调用初始化方法
                    if (typeof this.$refs.llxRef.init === 'function') {
                        this.$refs.llxRef.init()
                    }
                } else if (this.navActive === 2 && this.$refs.hdqRef) {
                    // 活动墙：调用获取活动列表方法
                    if (typeof this.$refs.hdqRef.getActivityList === 'function') {
                        this.$refs.hdqRef.getActivityList()
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.community-container {
    width: 100%;
    height: 100%;

    .margin32 {
		margin: 0 32rpx;
	}
    .margin20 {
        margin-right: 20rpx;
    }

    .search-box {
		height: 72rpx;
		background: $uni-bg-color;
		border-radius: 60rpx;
		padding: 0 28rpx;
		margin-bottom: 28rpx;
		width: 100%;
        background: #EFF9FF;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(7,133,207,0.16);

        &.disabled {
            pointer-events: none;
        }
		
		.iconfont {
			color: $uni-text-color-grey;
			margin-right: 20rpx;
		}
		
		.input {
			width: 100%;
			height: 100%;
			color: $uni-text-color-grey;
			border: none;
			outline: none;
			background: transparent;
		}
	}

    .nav-con {
        padding: 0 32rpx;
        height: 65rpx;

        .nav-item {
            font-size: 28rpx;
            color: #666;
        }

        .active {
            position: relative;
            font-weight: bold;
            font-size: 30rpx;
            color: #333;

            &::after {
                content: "";
                position: absolute;
                bottom: -10rpx;
                left: 50%;
                transform: translateX(-50%);
                width: 24rpx;
                height: 6rpx;
                background: #0785CF;
                border-radius: 60rpx 60rpx 60rpx 60rpx;
            }
        }
    }
}
</style>